<template>
  <view class="">
    <template v-for="item in dataInfo.list">
      <view
        class="list-cons"
        @click="gotoView(item)"
        :key="item.id"
        v-if="item.status == value"
      >
        <view class="item_top">
          <view class="top_left">
            {{ item.status == 0 ? "待回复" : "已处理" }}
          </view>
          <view class="top_right">
            {{ item.messageTime }}
          </view>
        </view>
        <view class="item_bottom">
          <view class="bottom_left">
            <view class="left_top">问题描述</view>
            <view class="left_bottom">
              {{ item.content }}
            </view>
          </view>
          <view class="bottom_right">
            <image :src="arrow" mode=""></image>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { reply } from "../../../api/index";
export default {
  props: {
    dataInfo: {
      type: Object,
      default: {},
    },
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      arrow: require("static/close.png"),
    };
  },
  methods: {
    gotoView(data) {
      console.log(data, "asdasdasd");
      if (data.status == 1) {
        let params = {
          id: data.id,
          status: 1,
        };
        reply(params).then((res) => {});
      }
      let key = {};
      if (data.replyContent) {
        key = {
          content: data.content,
          replyContent: data.replyContent,
          replyTime: data.replyTime,
          status: data.status,
        };
      } else {
        key = {
          content: data.content,
          messageTime: data.messageTime,
          status: data.status,
        };
      }
      let value = JSON.stringify(key);
      uni.setStorageSync("complaintInfo", value);
      uni.navigateTo({
        url: "/pages/complaint/complaint?type=1",
      });
    },
  },
};
</script>

<style scoped>
.list-cons {
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
  border-radius: 24rpx;
  background: #fff;
  margin-bottom: 24rpx;
}
.item_top {
  width: 100%;
  padding: 36rpx 0;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_left {
  color: #333;
  font-family: PingFang SC;
  font-size: 28rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 28rpx; /* 100% */
}
.top_right {
  color: #999;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 24rpx; /* 100% */
  text-align: right;
}
.item_bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom_left {
  width: calc(100% - 32rpx);
}
.left_top {
  width: 100%;
  padding: 24rpx 0;
  color: #333;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 24rpx; /* 100% */
}
.left_bottom {
  width: 100%;
  color: #999;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 24rpx; /* 100% */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 0 40rpx 0;
  box-sizing: border-box;
}
.bottom_right {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
}
.bottom_right image {
  display: block;
  width: 32rpx;
  height: 32rpx;
}
</style>
